import { BoxReveal } from "@/components/magicui/box-reveal";
import Image from "next/image";
import hero1 from "../images/hero-1.png";
import { Header } from "./header";

export function Herosection() {
  return (
    <div className="relative min-h-screen">
      <Header />
      {/* 渐变动画背景 */}
      <div className="absolute inset-0 z-0 bg-gradient-to-br from-[#2D1B69] via-[#472F95] to-[#7355FF] animate-gradient-x" />

      {/* 内容区域 */}
      <div className="relative z-10 flex items-center justify-center min-h-screen pt-16">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-7xl text-center backdrop-blur-lg bg-gradient-to-t from-[#2D1B69]/60 via-[#472F95]/40 to-transparent p-16 lg:p-24" style={{
            clipPath: "polygon(0% 15%, 5% 0%, 95% 0%, 100% 15%, 98% 85%, 90% 100%, 10% 100%, 2% 85%)",
            borderRadius: "50px",
            boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.37)"
          }}>
            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <h1 className="text-5xl font-bold tracking-tight text-white sm:text-7xl lg:text-8xl">
                <span className="inline-block animate-float">Jank</span>
                <span className="text-[#5046e6]">.</span>
              </h1>
            </BoxReveal>

            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <p className="mt-8 text-2xl leading-8 text-white/90 font-medium">
                现代化的
                <span className="text-[#46e6c9]">开源建站</span>解决方案
              </p>
            </BoxReveal>

            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <p className="mt-4 text-2xl leading-8 text-white/90 font-medium">
                为您的网站带来前所未有的创作体验
              </p>
            </BoxReveal>

            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <p className="mt-6 text-2xl leading-8 text-white/90 font-medium">
                简单易用的可视化编辑器，让您的创意自由绽放
              </p>
            </BoxReveal>

            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <p className="mt-4 text-2xl leading-8 text-white/90 font-medium">
                强大的插件系统，轻松扩展网站功能
              </p>
            </BoxReveal>

            <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
              <div className="mt-12 flex items-center justify-center gap-x-8">
                <a
                  href="#"
                  className="rounded-lg bg-[#7355FF] px-8 py-4 text-lg font-semibold text-white shadow-lg hover:bg-[#472F95] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7355FF] transition-all duration-200"
                >
                  开始使用
                </a>
                <a href="#" className="text-lg font-semibold leading-6 text-white/90 hover:text-[#7355FF] transition-colors duration-200">
                  了解更多 <span aria-hidden="true">→</span>
                </a>
              </div>
            </BoxReveal>
          </div>
        </div>
      </div>
    </div>
  );
}